サクッとMUIベースの管理画面が作れる React Admin のチュートリアルを試してみた

React Admin とは

ReactとMaterial Designを用いて、REST/GraphQL APIの上で、ブラウザ上で動作するデータドリブンなアプリケーションを構築するためのフロントエンドフレームワークです。

引用元：react-admin

REST API から取得したデータを表示するテーブルやダッシュボードを数行のコードの記述で実装できるライブラリです。認証やソート機能、検索機能、CSV エクスポート機能など、管理画面にほしい機能を一通り備えています。Material UI がベースに組み込まれているので UI コンポーネントや Theme 機能などは Material UI の仕様と同様です。

できたもの

User データと Post データの一覧を表示するデータテーブルを作成しました。

Getting Started

create-react-appで React プロジェクトの雛形を作成し、必要なライブラリをインストールします。言語には TypeScript を指定します。

yarn create react-app test-admin --template typescript
cd test-admin
yarn add react-admin ra-data-json-server prop-types
yarn start

サンプル API のデータをテーブルに表示する

次に App.tsx の内容を以下のように書き換えます。

// in src/App.tsx
import * as React from "react";
import {Admin, Resource, ListGuesser} from "react-admin";
import jsonServerProvider from "ra-data-json-server";

const dataProvider = jsonServerProvider("https://jsonplaceholder.typicode.com");
const App = () => (
  <Admin dataProvider={dataProvider}>
    <Resource name="users" list={ListGuesser} />
  </Admin>
);

export default App;

react-admin アプリケーションのルートコンポーネントである<Admin>コンポーネントを読み込むようにApp.tsxを更新しました。<Admin>コンポーネントには API からデータを取得する関数、dataProviderを渡します。

dataProvider は API の仕様に従って変更する必要がありますが、今回のサンプルでは ra-data-json-server データプロバイダを渡します。チュートリアル用にはJSONPlaceholderで仮のデータを返却してくれる API が用意されているのでこれを利用します。

<Resource name="users" />と記述することで、指定した URL から”users”レコードを指定して取得します。この<Resource>コンポーネントでは、他にも各 CRUD 操作(list, create, edit, and show)に使用するコンポーネントを定義することができます。

ListGuesserについて

list={ListGuesser}では、取得したデータのリストを表示するために<ListGuesser>コンポーネントを指定しています。ListGuesserコンポーネントはAPI から取得したデータに基づいて、リストのカラムに使用するフォーマットを推測してくれます。

ListGuesserは返却されるデータ形式に基づいて画面に表示するのに必要なコンポーネントを割り当ててくれますが、このままだと必要ない項目まで全て画面に表示されたままになってしまいます。次のステップでListGuesserコンポーネントをUsersコンポーネントに置き換えます。

ListGuesserを利用している状態でブラウザのコンソールを開くと、このようにAPIからフェッチされたレスポンスの構造に沿ってreact-adminがコンポーネントを生成してくれるのがみれるので、この内容を次で作成するUserコンポーネントにコピペします。

Users コンポーネントを定義する

以下のコンポーネントを新規作成します。

// in src/components/Users/index.tsx
import * as React from "react";
import {List, Datagrid, TextField, EmailField} from "react-admin";

export const UserList = (props) => (
  <List {...props}>
    <Datagrid rowClick="edit">
      <TextField source="id" />
      <TextField source="name" />
      <TextField source="username" />
      <EmailField source="email" />
      <TextField source="address.street" />
      <TextField source="phone" />
      <TextField source="website" />
      <TextField source="company.name" />
    </Datagrid>
  </List>
);

次にApp.tsxを以下のように更新します。

// App.tsx
import React from "react";
import {Admin, Resource} from "react-admin";
import jsonServerProvider from "ra-data-json-server";
import {UserList} from "../src/components/Users";
import "./App.css";
const dataProvider = jsonServerProvider("https://jsonplaceholder.typicode.com");

function App() {
  return (
    <Admin dataProvider={dataProvider}>
      <Resource name="users" list={UserList} />
    </Admin>
  );
}

export default App;

これでカスタマイズ可能なコンポーネントを利用していることになります。ListGuesserは API の返却値から表示可能なカラムを全て表示していましたが、User コンポーネントを追加することで必要な項目のみを表示するよう調整することができるようになりました。

Posts コンポーネントを追加し関連する User データをテーブルに表示する

次にPostデータの一覧を表示するPostコンポーネントを作成します。それぞれの Post レコードには UserId が含まれており、UserId は特定の User と紐づいています。

{
  "id": 1,
  "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
  "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto",
  "userId": 1
}

UserId が外部キーとなり、紐づいている User データを参照します。ここでは react-admin の<ReferenceField>コンポーネントを利用して関連しているデータの表示を実装します。

// in src/components/Posts/index.tsx
import * as React from "react";
import {List, Datagrid, TextField, ReferenceField} from "react-admin";

export const PostList = (props) => (
  <List {...props}>
    <Datagrid rowClick="edit">
      <ReferenceField source="userId" reference="users">
        <TextField source="name" />
      </ReferenceField>
      <TextField source="id" />
      <TextField source="title" />
      <TextField source="body" />
    </Datagrid>
  </List>
);

App.tsxも以下のように更新します。

// in src/App.tsx
import {Admin, Resource} from "react-admin";
import {PostList} from "./posts";
import {UserList} from "./users";

const App = () => (
  <Admin dataProvider={dataProvider}>
    <Resource name="posts" list={PostList} />
    <Resource name="users" list={UserList} />
  </Admin>
);

これで Posts コンポーネントから関連 User を参照できるようになりました。

あとがき

本記事では react-admin の超基本的な利用方法についてチュートリアルの内容に沿ってざっくりとご紹介しました。管理画面を作るプロジェクトは社内でも多いのでここまで手軽に作成できるのはとてもうれしいです。今回紹介した内容以外にもいろいろな機能が備わっているのでもう少し触ってみて、また何か気づきがあればブログにまとめたいと思います。

Reference

-React-Admin Tutorial